<script setup>
import headerBar from '@/components/header/index.vue'
import footerBar from '@/components/footer/index.vue'
import { getData } from '@/utils/util.js'
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
import { bannerlist } from '@/api/index';
import { informationrecommend,informationlist,
	informationlabel,informationfilterlist,
	informationhotlist } from '@/api/info';
const checkList = ref([]);
const swiperList = ref([]);
const informationrecommendList = ref([]);
const informationlistList = ref([]);
const informationlabelList = ref([]);
const informationfilterlistList = ref([]);
const getinformationhotlistList = ref([]);
// 轮播图
const getbannerlist = () => {
	let params = {
		"data": {
			"bannertype": 2
		}
	}
	bannerlist(params).then(res => {
		swiperList.value = res.data.bannerlist;
	})
}
getbannerlist();
// 推荐
const getinformationrecommend = () => {
	let params = {
		"data": {
			"pagesize": 4,
    		"pagestart": 0
		}
	}
	informationrecommend(params).then(res => {
		informationrecommendList.value = res.data.informationlist;
		console.log(res);
	})
}
getinformationrecommend();
//资讯列表
const getinformationlist = () => {
	let params = {
		"data": {
			"pagesize": 4,
    		"pagestart": 0
		}
	}
	informationlist(params).then(res => {
		console.log(res);
		informationlistList.value = res.data.informationlist;
	})
}
// getinformationlist();
//informationlabel
const getinformationlabel = () => {
	let params = {
		"data": {
			"pagesize": 1000,
    		"pagestart": 0
		}
	}
	informationlabel(params).then(res => {
		console.log(res);
		informationlabelList.value = res.data.labellist;
	})
}
getinformationlabel();
// 筛选资讯文章列表
const getinformationfilterlist = () => {
	let params = {
		"data": {
			"labellist":checkList.value,
			"pagesize": 4,
    		"pagestart": 0
		}
	}
	informationfilterlist(params).then(res => {
		console.log(res);
		informationfilterlistList.value = res.data.informationlist;
	})
}
getinformationfilterlist();
//
// 筛选资讯文章列表
const getinformationhotlist = () => {
	let params = {
		"data": {
			"pagesize": 10000,
    		"pagestart": 0
		}
	}
	informationhotlist(params).then(res => {
		console.log(res);
		getinformationhotlistList.value = res.data.informationlist;
	})
}
getinformationhotlist();
const jumpDetail = (obj) => {
	router.push({
		path: '/detail',
		query: {
			id: obj.informationid
		}
	})
}
</script>
<template>
	<div class="container">
		<header-bar :index="1"></header-bar>
		<div class="swiper">
			<el-carousel height="688px">
				<el-carousel-item v-for="(item, index) in swiperList" :key="index">
					<a :href="item.bannerhref" target="_blank" class="carousel">
						<img :src="item.bannerurl" alt="">
					</a>
				</el-carousel-item>
			</el-carousel>
		</div>
		<div class="module-container">
			<div class="module-one">
				<div class="module-one-item" 
				v-for="(item,index) in informationrecommendList" 
				@click="jumpDetail(item)"
				:key="index">
				<div v-if="index!==3" class="module-one-item-child" >
					<div class="module-one-img">
						<img :src="item.informationthumbnail" alt="">
					</div>
					<div class="module-one-text">
						<div class="module-one-title">{{ item.informationname }}</div>
						<div class="module-one-desc">{{ item.informationabstract }}</div>
					</div>
				</div>
				<div v-else class="module-one-item-child" >
					<div class="module-one-text">
						<div class="module-one-title">{{ item.informationname }}</div>
						<div class="module-one-desc">{{ item.informationabstract }}</div>
					</div>
					<div class="module-one-img">
						<img :src="item.informationthumbnail" alt="">
					</div>
				</div>
					
				</div>
			</div>
			<div class="module-two">
				<div class="module-two-left">
					<div class="module-two-left-item" 
					v-for="(item,index) in informationfilterlistList" 
					@click="jumpDetail(item)"
					:key="index">
						<div class="module-two-left-item-pic">
							<img :src="item.informationthumbnail" alt="">
						</div>
						<div class="module-two-left-item-content">
							<div class="module-two-left-item-content-title">{{ item.informationname }}</div>
							<div class="module-two-left-item-content-desc">
								{{ item.informationabstract }}
							</div>
							<div class="module-two-left-item-content-tool">
								<div class="module-two-left-item-content-tool-left">{{ item.informationtype }}</div>
								<div class="module-two-left-item-content-tool-right">
									<div>{{ getData(item.publishtime) }}</div>
									<div>热度：{{ item.informationhot }}</div>
								</div>
							</div>
						</div>
						<div class="module-two-left-item-link">
							<ul>
								<li v-for="(val,key) in item.recommendlist" 
									@click="jumpDetail(val)"
									:key="key">
									{{ val.informationname }}
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="module-two-right">
					<div class="module-two-right-type">
						<el-checkbox-group v-model="checkList" @change="getinformationfilterlist">
							<el-checkbox :label="item.labelid" :value="item.labelid" v-for="(item,index) in informationlabelList" :key="index" >
								{{ item.labelname }}
							</el-checkbox>
						</el-checkbox-group>
					</div>
					<div class="module-two-right-hot">
						<div class="module-two-right-hot-title">热度榜</div>
						<div class="module-two-right-hot-list">
							<div class="module-two-right-hot-item" 
							@click="jumpDetail(item)"
							v-for="(item,index) in getinformationhotlistList" :key="index">
								{{ index+1+'、'+item.informationname }}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footer-bar></footer-bar>
	</div>
</template>
<style lang="scss" scoped>
.container {
	width: 100%;
	background: url(../../assets/images/info_bg.png) repeat center center/100%;
}

.module-container {
	width: 1520px;
	margin: 0 auto;
}

.carousel {
	display: block;
	width: 100%;
	height: 100%;

	img {
		display: block;
		width: 100%;
		height: 100%;
	}
}

.module {
	&-one {
		display: flex;

		&-item {
			width: 344px;
			height: 344px;
			background: #FFFFFF;
			box-shadow: 0px 6px 20px 2px rgba(0, 0, 0, 0.1);
			border-radius: 20px;
			padding: 24px;
			box-sizing: border-box;
			margin-top: 48px;
			margin-bottom: 50px;
			cursor: pointer;
		}

		&-item+&-item {
			margin-left: 48px;
		}

		&-item:nth-child(4n+1),
		&-item:nth-child(4n+2) {
			.module-one-item-child{
				display: flex;
				justify-content: space-between;
			}
			.module-one-text {
				width: 124px;
			}

			.module-one-img {
				width: 148px;
				height: 296px;
				border-radius: 20px;
			}

			.module-one-title {
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 4;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			.module-one-desc {
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 8;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
		}

		&-item:nth-child(4n+3),
		&-item:nth-child(4n+4) {
			.module-one-img {
				width: 296px;
				height: 148px;
				border-radius: 20px;
			}

			.module-one-title {
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			.module-one-desc {
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 3;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
		}

		&-item:nth-child(4n+3) {
			.module-one-img {
				margin-bottom: 24px;
			}
		}

		&-item:nth-child(4n+4) {
			.module-one-img {
				margin-top: 24px;
			}
		}

		&-img img {
			display: block;
			width: 100%;
			height: 100%;
			border-radius: 20px;
		}

		&-title {
			font-family: MiSansVF_Medium;
			font-size: 18px;
			color: #000000;
			line-height: 24px;
		}

		&-desc {
			font-family: MiSansVF_Medium;
			font-size: 14px;
			color: rgba(0, 0, 0, 0.5);
			line-height: 24px;
		}
	}

	&-two {
		margin-bottom: 100px;
		display: flex;
		justify-content: space-between;

		&-left {
			width: 1128px;

			&-item {
				display: flex;
				padding: 45px 0;
				border-bottom: 1px solid rgba(0, 0, 0, 0.25);
				box-sizing: border-box;
				cursor: pointer;
				&-pic {
					width: 200px;
					height: 200px;
					margin-right: 40px;
					flex-shrink: 0;
					img {
						width: 100%;
						height: 100%;
						border-radius: 20px;
					}
				}

				&-content {
					width: 460px;
					flex-shrink: 0;
					&-title {
						font-family: MiSansVF_Medium;
						font-size: 18px;
						color: #000000;
						line-height: 24px;
						text-align: justify;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}

					&-desc {
						font-family: MiSansVF_Medium;
						font-size: 14px;
						color: rgba(0, 0, 0, 0.5);
						line-height: 24px;
						text-align: left;
						margin-top: 24px;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 3;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}

					&-tool {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 32px;

						&-left {
							font-family: MiSansVF_Medium;
							font-size: 18px;
							color: rgba(0, 0, 0, 0.3);
							text-align: left;
							border-left: 2px solid rgba(0, 0, 0, 0.25);
							padding-left: 9px;
							box-sizing: border-box;
						}

						&-right {
							display: flex;
							align-items: center;

							div {
								font-family: MiSansVF_Medium;
								font-size: 18px;
								color: rgba(0, 0, 0, 0.3);
								text-align: left;
								border-left: 2px solid rgba(0, 0, 0, 0.25);
								padding-left: 9px;
							}

							div+div {
								margin-left: 9px;
							}
						}
					}

				}

				&-link {
					width: 400px;
					margin-left: 40px;
					border-left: 1px solid rgba(0, 0, 0, 0.25);
					padding-left: 39px;
					box-sizing: border-box;
					flex-shrink: 0;
					li {
						font-family: MiSansVF_Medium;
						font-size: 18px;
						color: #333333;
						line-height: 30px;
						text-align: justify;
						list-style: none;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
					}

					li+li {
						margin-top: 27px;
					}
				}
			}
		}

		&-right-type {
			width: 344px;
			height: 344px;
			background: #FFFFFF;
			border-radius: 20px;
			padding: 16px 48px;
			box-sizing: border-box;
			margin-top: 45px;
		}

		&-right-hot {
			width: 344px;
			height: 688px;
			background: #FFFFFF;
			border-radius: 20px;
			padding: 30px 46px;
			box-sizing: border-box;
			margin-top: 48px;

			&-title {
				font-family: MiSansVF_Medium;
				font-size: 24px;
				color: #000000;
				line-height: 32px;
				text-align: justify;
				padding-left: 45px;
				background: url(../../assets/icons/hot.png)no-repeat left center;
				background-size: 30px 36px;
			}

			&-list {
				height: 575px;
				margin-top: 8px;
				overflow-y: auto;
			}

			&-item {
				font-family: MiSansVF_Medium;
				font-size: 18px;
				color: #000000;
				line-height: 24px;
				text-align: justify;
				overflow: hidden;
				/* 确保超出容器的文本被裁剪 */
				white-space: nowrap;
				/* 确保文本在一行内显示 */
				text-overflow: ellipsis;
				/* 超出部分显示为省略号 */
				margin-top: 24px;
				cursor: pointer;
			}
		}
	}
}

::v-deep(.el-checkbox) {
	display: block;
	height: 48px;
}
</style>
